<script setup>
import { computed, ref } from 'vue'

const regionList = [
  {
    regionId: 1,
    regionName: '北京',
    cities: [
      { cityId: 11, cityName: '东城区' },
      { cityId: 12, cityName: '西城区' }
    ]
  },
  {
    regionId: 2,
    regionName: '上海',
    cities: [
      { cityId: 21, cityName: '黄浦区' },
      { cityId: 22, cityName: '徐汇区' }
    ]
  },
  {
    regionId: 3,
    regionName: '江西',
    cities: [
      { cityId: 31, cityName: '南昌市' },
      { cityId: 32, cityName: '九江市' }
    ]
  },
  {
    regionId: 4,
    regionName: '广东',
    cities: [
      { cityId: 41, cityName: '广州市' },
      { cityId: 42, cityName: '深圳市' },
      { cityId: 43, cityName: '珠海市' }
    ]
  },
  {
    regionId: 5,
    regionName: '浙江',
    cities: [
      { cityId: 51, cityName: '杭州市' },
      { cityId: 52, cityName: '宁波市' },
      { cityId: 53, cityName: '温州市' }
    ]
  },
  {
    regionId: 6,
    regionName: '江苏',
    cities: [
      { cityId: 61, cityName: '南京市' },
      { cityId: 62, cityName: '苏州市' },
      { cityId: 63, cityName: '无锡市' }
    ]
  },
  {
    regionId: 7,
    regionName: '四川',
    cities: [
      { cityId: 71, cityName: '成都市' },
      { cityId: 72, cityName: '绵阳市' },
      { cityId: 73, cityName: '乐山市' }
    ]
  },
  {
    regionId: 8,
    regionName: '湖北',
    cities: [
      { cityId: 81, cityName: '武汉市' },
      { cityId: 82, cityName: '宜昌市' },
      { cityId: 83, cityName: '襄阳市' }
    ]
  }
]

const currentRegion = ref([])
const currentCitieName = ref([])

const name = computed(() => {
  const regionName = currentRegion.value.regionName ? currentRegion.value.regionName : '请选择'
  return `${regionName} ${currentCitieName.value}`
})
</script>

<template>
  <div>
    <select class="border" v-model="currentRegion" @change="currentCitieName = ''">
      <option selected disabled>请选择</option>
      <option v-for="region in regionList" :key="region.regionId" :value="region">
        {{ region.regionName }}
      </option>
    </select>

    <select class="ml-2 border" v-model="currentCitieName">
      <option selected disabled>请选择</option>
      <option v-for="citie in currentRegion.cities" :key="citie.cityId" :value="citie.cityName">
        {{ citie.cityName }}
      </option>
    </select>
    <div>{{ name }}</div>
  </div>
</template>
